import React from "react";

// const Child = React.forwardRef((props, ref) => {
//   return (
//     <>
//       <input ref={ref} />
//     </>
//   );
// });

// 可以实现子组件中多个 ref 的使用
const Child = React.forwardRef((props, ref) => {
  const inputRef = React.useRef();
  const divRef = React.useRef();
  // 父组件通过 ref 即可 调用 内部自定义的函数 通过透传ref解决问题
  React.useImperativeHandle(ref, () => {
    return {
      inputFocus: () => {
        inputRef.current.focus();
      },
      wirteVal(str) {
        divRef.current.innerHTML = str;
      },
    };
  });
  return (
    <>
      <input ref={inputRef} />
      <div ref={divRef}></div>
    </>
  );
});

const App = () => {
  const childRef = React.useRef();
  return (
    <div>
      <button
        onClick={() => {
          // childRef.current.focus()
          childRef.current.inputFocus();
        }}
        style={{ marginRight: 30 }}
      >
        获取焦点
      </button>
      <button
        onClick={() => {
          // childRef.current.focus()
          childRef.current.wirteVal("hello hooks!!");
        }}
        style={{ marginRight: 30 }}
      >
        写入内容
      </button>
      <Child ref={childRef} />
    </div>
  );
};

export default App;
